<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page isELIgnored="false" %>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页 - 后台管理系统模板</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link href="/css/admin/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/admin/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/admin/main.min.js"></script>
</head>

<body>
<div class="container-fluid p-t-15">
    <div class="row">

        <div class="col-sm-6 col-md-3">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">今日收入</p>
                        <c:choose>
                            <c:when test="${incoming == null}">
                                <p class="h3 text-white m-b-0 fa-1-5x">0 元</p>
                            </c:when>
                            <c:otherwise>
                                <p class="h3 text-white m-b-0 fa-1-5x">
                                    <fmt:formatNumber type="number" value="${(incoming)}" pattern="#.00" /> 元
                                </p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent">
                        <i class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">新增用户</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">${userCount} 位</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent">
                        <i class="mdi mdi-account fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">用户总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">${usersCounts} 位</p>
                    </div>
                    <div class="pull-left">
                        <span class="img-avatar img-avatar-48 bg-translucent">
                            <i class="mdi mdi-account fa-1-5x"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">下单总量</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">${orderCounts} 单</p>
                    </div>
                    <div class="pull-left">
                        <span class="img-avatar img-avatar-48 bg-translucent">
                            <i class="mdi mdi-arrow-down-bold fa-1-5x"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>


    </div>


    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>每周用户</h4>
                </div>
                <div class="card-body">
                    <div class="chartjs-size-monitor"
                         style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                        <div class="chartjs-size-monitor-expand"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                        </div>
                    </div>
                    <canvas class="js-chartjs-bars chartjs-render-monitor"
                            style="display: block; height: 277px; width: 554px;" width="692" height="346"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>交易历史记录</h4>
                </div>
                <div class="card-body">
                    <div class="chartjs-size-monitor"
                         style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                        <div class="chartjs-size-monitor-expand"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink"
                             style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                            <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                        </div>
                    </div>
                    <canvas class="js-chartjs-lines chartjs-render-monitor"
                            style="display: block; height: 277px; width: 554px;" width="692" height="346"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>
